<template>
  <div class="bg_f2" v-if="result && ticketGoods">
    <div class="ub wxts">
      温馨提示：订单所含逾重行李将随机票一同退订，航班正常情况下，餐食不能退订，如有疑问请拨打95373查询。请仔细核对退票金额，谢谢！
    </div>
    <div class="ub bg_w mar_t05 ub-pj pad_05">
      <div class="ub ub-ac">
        <div class="ub">
          <b>应退总额</b>
        </div>
        <div class="ub-img question margin-l05" @click="ytze"></div>
      </div>
      <div class="ub ub-ac green">{{ '￥'+ Number(Number(result.ticketRefundMoney) + getTotal(ticketGoods)) }}</div>
    </div>
    <div class="ub bg_w mar_t05 pad_05">
      <div class="ub ub-ac">
        <b>退票相关乘机人及航段信息</b>
      </div>
    </div>
    <div class="ub ub-ver bg_w pad_05" v-for="(item, index) in refundApply.content.paxIdsInfos">
      <div class="ub ub-ac">{{item.tname}}</div>
      <div class="ub ub-ac pad_t1 fz08">
        <div class="ub">{{item.beginCity+'-'+item.endCity}}</div>
        <div class="ub margin-l05">{{item.flightNo}}</div>
        <div class="ub margin-l05">{{item.flightDate}}</div>
        <div class="ub margin-l05">{{item.depTime}}</div>
      </div>
    </div>
    <div class="ub bg_w mar_t05 pad_05 ub-pj">
      <div class="ub ub-ac">
        <b>应退还机票金额小计</b>
      </div>
      <div class="ub green">{{ '￥'+ Number(result.ticketRefundMoney - Number(result.totalMerchantMoney||0)) }}</div>
    </div>
    <div class="ub bg_w pad_05 ub-pj pad_t1">
      <div class="ub ub-ac">原票面价格</div>
      <div class="ub yellow">{{'￥'+ result.totalMarketPrice}}</div>
    </div>
    <div class="ub bg_w pad_05 ub-pj pad_t1">
      <div class="ub ub-ac">民航发展基金(CN)/其他税费</div>
      <div class="ub yellow">{{'￥'+ (result.taxFeeDescCN||0)}}</div>
    </div>
    <div class="ub bg_w pad_05 ub-pj pad_t1">
      <div class="ub ub-ac">燃油附加费(YR)</div>
      <div class="ub yellow">{{'￥'+ (result.taxFeeDescYR||0)}}</div>
    </div>
    <div class="ub bg_w pad_05 ub-pj pad_t1 red">
      <div class="ub">
        <div class="ub ub-ac">退票手续费</div>
        <div class="ub-img why_red margin-l05" @click="tpsxf"></div>
      </div>
      <div class="ub">{{'-￥'+ (result.ticketPoundage || 0)}}</div>
    </div>
    <div class="ub bg_w mar_t05 pad_05 ub-pj">
      <div class="ub ub-ac">
        <b>交易处理费</b>
      </div>
      <div class="ub yellow">{{'￥'+ (result.totalMerchantMoney||0)}}</div>
    </div>
    <div class="ub bg_w mar_t05 pad_05 ub-pj" v-if="getTotal(ticketGoods) != 0">
      <div class="ub ub-ac">
        <b>应退还增值产品金额小计</b>
      </div>
      <div class="ub green">{{'￥'+ getTotal(ticketGoods)}}</div>
    </div>
    <div class="ub ub-ver" v-if="ticketGoods && ( getSum(item) != 0)" v-for="(item,index) in ticketGoods">
      <div class="ub bg_w mar_t05 pad_05 ub-pj">
        <div class="ub ub-ac">
          该票号应退金额
        </div>
        <div class="ub yellow">{{'￥'+ getSum(item)}}</div>
      </div>
      <div class="ub bg_w mar_t05 pad_05 ub-pj" v-for="(goods,i) in item.goodsList" v-if="goods.goodsBak2 == 'BAGS'">
        <div class="ub ub-ac">
          {{goods.goodsChName}}
        </div>
        <div class="ub yellow">{{'￥'+goods.goodsPrice}}</div>
      </div>
      <div class="ub bg_w pad_05 ub-pj">
        <div class="ub ub-ac">
          关联票号(航段)
        </div>
      </div>
      <div class="ub bg_w pad_05 ub-pj pad_t1 fz08">
        <div class="ub ub-ac">{{item.ticketNum}}</div>
        <div class="ub ub-ac">
          <div class="ub">{{item.beginCityName.split('_')[0] + '-' + item.endCityName.split('_')[0]}}</div>
          <div class="ub margin-l05">{{item.flightNum}}</div>
        </div>
      </div>
    </div>

    <div class="ub wxts">
      温馨提示：航班正常情况下，不允许退订机上餐食，如因航空公司原因导致航班不正常时，请联系呼叫中心申请退款。
    </div>
    <div class="ub bg_w zanwei"></div>
    <div class="footer">
      <div class="ub ub-ac ub-pc" @click="doApplyCheck">提交申请</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
// import data from 'cal.js';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '核对退票费用',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '/home',
      rightIcon: 'homeIcon'
    });
    this.getRefundFee();
  },
  data: function () {
    return {
      result: '',
      ticketGoods: ''
    }
  },
  components: {
  },
  computed: mapState(['loginData', 'refundApply']),
  methods: {
    ytze: function () { // 应退总额
      this.$store.commit('setMsg', {
        ifshow: true,
        showMsg: true,
        msgTitle: '应退总额',
        msgContent: '如果订单里包含增值服务，退票应退总金额可能会分两次退回您的原支付账户，请耐心等待并注意查收，机上餐食默认不允许退订。如有疑问，请联系客服95373咨询。',
        msgBtn: '关闭'
      });
    },
    tpsxf: function () { // 退票手续费
      let str = this.refundApply.content.paxIdsInfos[0].jianjie;
      this.$store.commit('setMsg', {
        ifshow: true,
        showMsg: true,
        msgTitle: '退票手续费',
        msgContent: '此为当前时间计算的费用,具体手续费已提交申请的时间计算为准。</br></br>' + str,
        msgBtn: '关闭'
      });
    },
    getRefundFee: function () {
      let content = this.refundApply.content;
      let data = this.$utils.getUserContent(content);
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let self = this;
      console.log(JSON.stringify(data));
      this.$utils.ajax(data, 'refundCalculate', self, function (data) {
        console.log(data);
        let content = data.content;
        let result = content.results;
        let ticketGoods = content.ticketGoods;
        self.result = result;
        self.ticketGoods = ticketGoods;
      });
    },
    getSum: function (arr) {
      let sum = 0;
      arr.goodsList.forEach(function (item, index) {
        if (item.goodsBak2 === 'BAGS') {
          sum += (item.goodsPrice || 0);
        }
      });
      return Number(sum);
    },
    getTotal: function (ticketGoods) {
      let total = 0;
      let me = this;
      ticketGoods.forEach(function (item, index) {
        total += me.getSum(item);
      });
      console.log(total);
      return Number(total);
    },
    applyCheck: function () { // 执行退票
      let content = this.refundApply.content;
      let data = this.$utils.getUserContent(content);
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let self = this;
      console.log(JSON.stringify(data));
      this.$utils.ajax(data, 'refundApply', self, function (data) {
        console.log(data);
        self.$store.dispatch('showTx', { text: '退票成功' });
        self.$router.push('/exit_success');
      }, function (err) {
        self.$store.dispatch('showTx', { text: err.message });
        self.$router.push('/exit_fail');
      })
    },
    doApplyCheck: function () {
      let self = this;
      this.$store.commit('setConfirm', { ifShow: true, text: '确定退订机票？' });
      this.$store.commit('setConfirmCallBak', function () {
        // console.log('123');
        self.applyCheck();
      });
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../stylus/base.styl';
.wxts
  background-color: #EEDAF5;
  color: #854a95;
  padding: f_times(0.8);
  font-size: f_times(0.8);
  line-height: f_times(1.2);
.question
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('question.png');
.why_red
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('why_red.png');
.green
  color: #71AE7B;
.red
  color: #F13838;
.yellow
  color: #FFB643;
.zanwei
  width: 100%;
  height: f_times(3);
.footer
  width: 100%;
  height: f_times(2.5);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  >div
    height: 100%;
    width: 60%;
    color: #fff;
    background: #843D99;
    margin: 0 auto;
    border-radius: 4px;
</style>